<template>
  <q-dialog class="pie-dialog" v-model="show" persistent maximized>
    <q-card class="full-width full-height flex bg-white screen">
      <q-card-section class="row items-center q-pb-none full-width">
        <div class="text-h6 text-weight-bold">当班状态统计</div>
        <q-space />
        <q-btn @click="hideDialog" flat round size="sm" color="primary" icon="iconfont icontubiao-133">
          <q-tooltip>关闭</q-tooltip>
        </q-btn>
      </q-card-section>
      <q-card-section class="dialog-content">
        <div class="chart" ref="dialogChart"></div>
        <ul class="explain">
          <li v-for="(item,index) in data" :key="index">
            <div class="name">
              <i class="round" :style="{'background-color': chartColor[item.name]}"></i>
              {{item.keyName}}
            </div>
            <div class="value">{{item.value}}%</div>
          </li>
        </ul>
      </q-card-section>
    </q-card>
  </q-dialog>
<!--  <div class='pie-content'>-->
<!--    <div class="chart" ref="chart"></div>-->
<!--    <ul class="explain">-->
<!--      <li v-for="(item,index) in data" :key="index">-->
<!--        <div class="name">-->
<!--          <i class="round" :style="{'background-color': chartColor[item.name]}"></i>-->
<!--          {{item.keyName}}-->
<!--        </div>-->
<!--        <div class="value">{{item.percent}}%</div>-->
<!--      </li>-->
<!--    </ul>-->
<!--  </div>-->
</template>

<script>
import echarts from 'echarts'
import { secondToString } from '../../../assets/js/util'

export default {
  name: 'cur-status-dialog',
  props: {
    chartColor: {
      type: Object,
      default: () => {
        return {
          process: '#18D77F', // 加工
          stop: '#FF8559', // 停机
          breaks: '#999999', // 断开
          offLine: '#666666', // 离线
          alarm: '#E43434', // 报警
          changeLine: '#AC70F2', // 换线
          fault: '#F7B82D', // 故障
          repair: '#44D8C6' // 维修
        }
      }
    },
    chartExplain: {
      type: Object,
      default: () => {
        return {
          process: '加工',
          stop: '停机',
          breaks: '断开',
          offLine: '离线',
          alarm: '报警',
          changeLine: '换线',
          fault: '故障',
          repair: '维修'
        }
      }
    }
  },
  data () {
    return {
      show: false,
      title: '',
      data: [],
      chartsData: [],
      chart: null,
      total: 0,
      type: 'percent'
    }
  },
  methods: {
    // 显示弹框
    showDialog (info, total, title, type) {
      this.show = true
      this.total = total
      this.title = title
      this.type = type
      this.$nextTick(() => {
        this.initInfo(info, type)
      })
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
    },
    // 初始化数据
    initInfo (info) {
      let data = []
      for (let key in info) {
        let item = {
          value: info[key],
          keyName: this.chartExplain[key],
          name: key
        }
        item.time = secondToString(info[key])
        data.push(item)
      }
      data = data.map(item => {
        return {
          ...item,
          value: item.value === 0 ? 0 : (item.value / this.total * 100).toFixed(2)
        }
      })
      this.data = data
      this.chartsData = data.filter(item => item.value !== 0).sort(function (a, b) {
        return b.value - a.value
      })
      if (this.chartsData.length > 0) {
        this.setOption(this.chartsData)
      } else {
        this.setOption(this.data)
      }
    },
    // 显示echart
    setOption (data) {
      let self = this
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: (res) => {
            let htmlStr = '<div>'
            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;font-size:14px;border-radius:5px;background-color:' + self.chartColor[res.data.name] + ';"></span>'
            htmlStr += `${res.data.keyName}：${res.data.time}`
            htmlStr += '</div>'
            return htmlStr
          }
        },
        grid: {
          bottom: 0,
          left: 0,
          right: 0,
          top: 0
        },
        calculable: true,
        polar: {
          center: ['50%', '50%'],
          radius: '90%'
        },
        radiusAxis: {
          // 极坐标半径刻度
          min: 0,
          max: function (value) {
            return data[0].value
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            align: 'left',
            formatter: '{value} %',
            color: '#999999',
            fontSize: 14,
            margin: -5
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#d3d3d3'
            }
          }
        },
        angleAxis: {
          type: 'category',
          clockwise: false,
          splitLine: {
            show: true,
            interval: 'auto',
            lineStyle: {
              width: 1,
              type: 'dashed',
              color: '#d3d3d3'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#d3d3d3'
            }
          }
        },
        series: [{
          name: '',
          type: 'pie',
          clockwise: false,
          radius: ['10%', '90%'],
          center: ['50%', '50%'],
          roseType: 'area',
          hoverOffset: 0,
          label: {
            show: false
          },
          itemStyle: {
            normal: {
              color: function (params) {
                return self.chartColor[params.name]
              }
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }]
      }
      this.chart = echarts.init(this.$refs.dialogChart)
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang='stylus' scoped>
  .dialog-content{
    height calc(100vh - 50px)
    display flex
    justify-content center
    align-items center
  }
  .chart{
    width calc(100vh - 50px)
    height calc(100vh - 50px)
    flex calc(100vh - 50px) 0
  }
  .explain{
    flex 144px 0
    margin-left 50px
    font-size 18px
    /*display flex*/
    /*flex-direction column*/
    /*justify-content center*/
    li{
      display inline-block
      width 50%
      &:nth-child(odd){
        margin-right 20px
      }
      .round{
        margin-right 10px
        display inline-block
        width 16px
        height 16px
        border-radius 8px
        vertical-align middle
      }
      .name{
        margin 19px 0 9px
      }
    }
  }
</style>
